import React, { useState, useEffect } from 'react';
import { Form, Alert, Button, Descriptions, Divider, Image, Input, message } from 'antd';
import { connect } from 'umi';
import styles from './index.less';
import UploadImg from '@/components/UploadImg';
import { UploadCommodityPicture, uploadCommodityStep, queryImageList } from '../../service';
import { DeleteOutlined } from '@ant-design/icons';
import PicturesWall from './Upload';
const lableStyle = {
  labelCol: { span: 4 },
  wrapperCol: { span: 24 },
};

const Step2 = (props) => {
  const [form] = Form.useForm();
  const { data, dispatch, handleImage, handleCurrent, CommodityId, reviseState } = props;
  const [facePicture, setFacePicture] = useState([]);
  const [faceArr, setFaceArr] = useState([]);

  if (!data) {
    return null;
  }
  const { validateFields, getFieldsValue } = form;

  const onPrev = () => {
    if (dispatch) {
      const values = getFieldsValue();
      handleCurrent(0);
      dispatch({
        type: 'commodityManagementAndCommodityCreatingSteps/saveStepFormData',
        payload: { ...data, ...values },
      });
      dispatch({
        type: 'commodityManagementAndCommodityCreatingSteps/saveCurrentStep',
        payload: 'info',
      });
    }
  };

  const onValidateForm = async () => {
    handleImage(facePicture);

    const arr = JSON.parse(JSON.stringify(facePicture));
    arr.map((item) => {
      delete item.id;
    });
    if (arr.length === 0) {
      handleCurrent(2);
      uploadCommodityStep(CommodityId, 2);
    } else {
      UploadCommodityPicture(arr, reviseState || faceArr.length > 0 ? 'PUT' : 'POST')
        .then((res) => {
          res.code === 0
            ? (handleCurrent(2), uploadCommodityStep(CommodityId, 2))
            : message.error(res.message);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };
  const handleSetFacePicture = (payload) => {
    const list = [];
    payload.map((item) => {
      list.push({
        url: item.url,
        goodsId: CommodityId,
      });
    });
    const arr = JSON.parse(JSON.stringify(list));
    setFacePicture(arr);
  };

  return (
    <Form {...lableStyle} form={form} layout="horizontal" className={styles.stepForm}>
      <Form.Item label="商品照片" name="picture" required={false} className={styles.picture}>
        {CommodityId ? (
          <PicturesWall
            subpath="goods"
            CommodityId={CommodityId}
            housePictures={faceArr}
            handleSetFacePicture={handleSetFacePicture}
          />
        ) : null}
      </Form.Item>
      <Form.Item
        className={styles.bottomBtn}
        style={{
          marginBottom: 8,
        }}
        wrapperCol={{
          xs: {
            span: 24,
            offset: 0,
          },
        }}
      >
        <Button onClick={onPrev}>上一步</Button>
        <Divider type="vertical" />
        <Button type="primary" onClick={onValidateForm}>
          下一步
        </Button>
      </Form.Item>
    </Form>
  );
};

export default connect(({ commodityManagementAndCommodityCreatingSteps, loading }) => ({
  submitting: loading.effects['commodityManagementAndCommodityCreatingSteps/submitStepForm'],
  data: commodityManagementAndCommodityCreatingSteps.step,
}))(Step2);
